﻿@{
    var ddlTaskRoleData = ViewBag.ddlTaskRoleData as List<Frame.Core.Models.TypeEnum>;
}
@section head{
    <style>
        .ele5 {
            border: 1px solid #ccc;
            overflow-y: scroll;
            overflow-x: hidden;
            display: inline-block;
            height: 220px;
            width: 100%;
            display: none;
            position: absolute;
            top: 100%;
            background-color: #fff;
            z-index: 100;
        }

    </style>
}
@section body {
    <form class="layui-form" action="">
        <div class="mainBox" style="background-color:#fff">
            <div class="main-container">
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">用户名:</label>
                            <div class="layui-input-block">
                                <input type="text" name="Name" lay-verify="required" placeholder="请输用户名" autocomplete="off" class="layui-input" />
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">中文名:</label>
                            <div class="layui-input-block">
                                <input type="text" name="ChineseName" lay-verify="required" placeholder="请输中文名" class="layui-input" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">密码:</label>
                            <div class="layui-input-block">
                                <input type="password" name="Password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" />
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">电话:</label>
                            <div class="layui-input-block">
                                <input type="text" name="CellPhone" placeholder="请输入电话" class="layui-input" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">任务角色:</label>
                            <div class="layui-input-block">
                                <select name="TaskRoleId" id="TaskRoleId" lay-verify="required">
                                    @foreach (var item in ddlTaskRoleData)
                                    {
                                        <option value="@item.Id">@item.Name</option>
                                    }
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">性别:</label>
                            <div class="layui-input-block">
                                <input type="radio" name="Gender" value="男" title="男" checked="">
                                <input type="radio" name="Gender" value="女" title="女">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">所属部门:</label>
                            <div class="layui-input-block">
                                <input type="text" id="DeptName" name="DeptName" lay-verify="required" placeholder="请选择" readonly="readonly" autocomplete="off" class="layui-input">
                                <div id="demoTree2" class="dtree ele5" lay-filter="data5" data-id="0"></div>
                                <input class="layui-hide" id="DeptID" name="DeptID" />
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">所属职称:</label>
                            <div class="layui-input-block">
                                <select name="Titles" xm-select="exampleTitle" xm-select-search="" lay-verify="required">
                                    <option value="">请选择职称</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">所属角色:</label>
                            <div class="layui-input-block">
                                <select name="Roles" xm-select="exampleRole" xm-select-search="" lay-verify="required" xm-select-direction="up">
                                    <option value="">请选择角色</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注:</label>
                            <div class="layui-input-block">
                                <input type="text" name="Remark" placeholder="请输入内容" class="layui-input" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="user-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-md">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
}
@section script {

    <script>
        layui.use(['form', 'view', 'dtree', 'select'], function () {
            let form = layui.form;
            let view = layui.view;
            var dtree = layui.dtree;
            var $ = layui.$;

            var formSelects = layui.select;

            //远程数据
            //远程数据
            formSelects.data('exampleTitle', 'server', {
                url: 'SelectTitleData',
                beforeSuccess: function (id, url, searchVal, result) {
                    //我要把数据外层的code, msg, data去掉
                    result = result.data;
                    //我要反转name
                    //$.each(result, function (index, item) {
                    //    item.name && (item.name = item.name.split('').reverse().join(''))
                    //});
                    //然后返回数据
                    return result;
                }
            });

            formSelects.data('exampleRole', 'server', {
                url: 'SelectRoleData',
                beforeSuccess: function (id, url, searchVal, result) {
                    //我要把数据外层的code, msg, data去掉
                    result = result.data;
                    return result;
                }
            });

            var DemoTree2;
            $("[name='DeptName']").on("click", function (e) {
                e.stopPropagation();
                if (!DemoTree2) {
                    //layui风格数据格式
                    DemoTree2 = dtree.render({
                        elem: "#demoTree2",
                        method: "post",
                        //url: '../layuiadmin/json/dtree/demoTree3.json',
                        url: 'GetDeptListJson',
                        initLevel: 4,//默认展开层级，当该值大于level时，则会展开树的节点，直到不大于当前待展开节点的level
                        dataStyle: "layuiStyle",  //使用layui风格的数据格式
                        dataFormat: "list",  //配置data的风格为list
                        response: { message: "msg", statusCode: 0, treeId: "ID", parentId: "ParentID", title: "Name" },  //修改response中返回数据的定义
                        //checkbar: true //开启复选框

                    });
                }
                $("#demoTree2").show();

            })// 对应的js

            dtree.on("node('demoTree2')", function (obj) {
                $("[name='DeptName']").val(obj.param.context);
                $("#DeptID").val(obj.param.nodeId);
                $("#demoTree2").hide();
            });

            $(document).on("click", function () {
                $("#demoTree2").hide();
            })

            //监听提交
            form.on('submit(user-save)', function (data) {
                //layer.alert(JSON.stringify(data.field), {
                //    title: '最终的提交信息'
                //})
                //请求登入接口
                view.req({
                    url: 'UserNew_btnSaveClose_Click' //实际使用请改成服务端真实接口
                    , data: { userJson: JSON.stringify(TrimObjToNewObj(data.field)), __RequestVerificationToken: document.getElementsByName("__RequestVerificationToken")[0].value }
                    , type: "post"
                    , dataType: "json"
                    //,contentType: 'application/json'
                    , done: function (res) {
                        if (res.codeIndex == 1) {
                            layer.msg(res.msg, {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            });

                            //加载top窗体专用，通过Iframe中id查找对应的窗体
                            //top.document.getElementById('5').contentWindow.btnSearchClick();
                        } else {
                            layer.msg(res.msg, {
                                offset: 't',
                                anim: 6
                            });
                        }

                    }
                });

                return false;
            });
        })
        //遍历对象去值的空格
        function TrimObjToNewObj(obj) {
            for (var index in obj) {
                obj[index] = trim(obj[index]);
            }
            return obj;
        }
        function trim(str) { //删除左右两端的空格
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }
    </script>
}
